<template>
  <div class="register">
    <!-- 关闭按钮 -->
    <div class="close">
      <i class="iconfont iconicon-test"></i>
    </div>
    <!-- logo部分 -->
    <div class="logo">
      <i class="iconfont iconnew"></i>
    </div>
    <!-- 注册主体部分 -->
    <hm-input
      v-model="username"
      placeholder="用户名 / 手机号码"
      :rules="userRule"
      ref="username"
      errMsg="账号格式不正确 规则：以1开头的5-11位数字">
    </hm-input>
    <hm-input
      v-model="nickname"
      placeholder="昵称"
      :rules="nickRule"
      ref="nickname"
      errMsg="昵称格式不正确 规则：2-6位中文">
    </hm-input>
    <hm-input
      v-model="password"
      placeholder="密码"
      :rules="pwdRule"
      ref="password"
      errMsg="密码格式不正确，请输入3-11位的数字">
      </hm-input>
    <hm-button class="register-btn" @click="registerClick">
      <div>注册</div>
    </hm-button>
  </div>
</template>

<script>
import HmInput from 'components/hm-input.vue'
import HmButton from 'components/hm-button.vue'

export default {
  data () {
    return {
      username: '',
      nickname: '',
      password: '',
      userRule: /^1\d{4,10}$/,
      pwdRule: /^\d{3,11}$/,
      nickRule: /^[\u4e00-\u9fa5]{2,6}$/
    }
  },

  components: {
    HmInput,
    HmButton
  },

  methods: {
    async registerClick () {
      const userStatus = this.$refs.username.status
      const nickStatus = this.$refs.nickname.status
      const pwdStatus = this.$refs.password.status
      if (!userStatus) return this.$toast('账户名格式不正确')
      if (!nickStatus) return this.$toast('昵称格式不正确')
      if (!pwdStatus) return this.$toast('密码格式不正确')
      if (userStatus && nickStatus && pwdStatus) {
        this.$toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true,
          message: '注册中...'
        })
        const { data: res } = await this.$axios.post('/register', {
          username: this.username,
          nickname: this.nickname,
          password: this.password
        })
        console.log(res)
        const { statusCode, message } = res
        if (statusCode !== 200) {
          return this.$toast.fail(message)
        }
        this.$toast.success(message)
        this.$router.push({
          name: 'Login',
          params: {
            username: this.username,
            password: this.password
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.register {
  padding: 20px;
}

.close i {
  font-size: 27px;
}

.logo {
  text-align: center;
  i {
    font-size: 126px;
    color: #c73520;
  }
}

.register-btn {
  margin-top: 30px;
}

.to-register {
  margin-top: 10px;
  text-align: center;
  span {
    color: blue;
  }
}
</style>
